<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/main}">
<head>
    <title th:text="${'商品详情 - ' + product.name}">商品详情</title>
</head>
<body>
    <div layout:fragment="title" th:text="${'商品详情 - ' + product.name}">商品详情</div>
    
    <div layout:fragment="content">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <!-- 功能按钮 -->
                <div class="d-flex justify-content-end mb-3">
                    <a th:href="@{/products}" class="btn btn-secondary me-2">
                        <i class="bi bi-arrow-left"></i> 返回列表
                    </a>
                    <a th:href="@{'/products/edit/' + ${product.id}}" class="btn btn-primary me-2">
                        <i class="bi bi-pencil"></i> 编辑
                    </a>
                    <a th:href="@{'/purchases/add?productId=' + ${product.id}}" class="btn btn-success me-2">
                        <i class="bi bi-cart-plus"></i> 进货
                    </a>
                    <a th:href="@{'/sales/add?productId=' + ${product.id}}" class="btn btn-warning me-2">
                        <i class="bi bi-cart-check"></i> 销售
                    </a>
                    <button class="btn btn-danger" th:attr="onclick='confirmDelete(\'' + ${product.id} + '\',\'' + ${product.name} + '\')'">
                        <i class="bi bi-trash"></i> 删除
                    </button>
                </div>
                
                <!-- 商品信息 -->
                <div class="row">
                    <!-- 左侧基本信息 -->
                    <div class="col-md-8">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">基本信息</h5>
                            </div>
                            <div class="card-body">
                                <table class="table table-borderless">
                                    <tr>
                                        <th style="width: 30%">商品名称</th>
                                        <td th:text="${product.name}">商品名称</td>
                                    </tr>
                                    <tr>
                                        <th>条形码</th>
                                        <td>
                                            <span th:if="${product.barcode}" th:text="${product.barcode}">条形码</span>
                                            <span th:unless="${product.barcode}" class="text-muted">未设置</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>商品分类</th>
                                        <td>
                                            <span th:if="${product.category}" th:text="${product.category}">分类</span>
                                            <span th:unless="${product.category}" class="text-muted">未分类</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>商品描述</th>
                                        <td>
                                            <span th:if="${product.description}" th:text="${product.description}">描述</span>
                                            <span th:unless="${product.description}" class="text-muted">暂无描述</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>供应商</th>
                                        <td>
                                            <span th:if="${product.supplier}" th:text="${product.supplier}">供应商</span>
                                            <span th:unless="${product.supplier}" class="text-muted">未设置</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>创建时间</th>
                                        <td th:text="${#temporals.format(product.createdAt, 'yyyy-MM-dd HH:mm:ss')}">创建时间</td>
                                    </tr>
                                    <tr>
                                        <th>更新时间</th>
                                        <td th:text="${#temporals.format(product.updatedAt, 'yyyy-MM-dd HH:mm:ss')}">更新时间</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        
                        <!-- 历史交易 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">历史交易</h5>
                            </div>
                            <div class="card-body">
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="purchase-tab" data-bs-toggle="tab" data-bs-target="#purchase" type="button" role="tab">进货记录</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab">销售记录</button>
                                    </li>
                                </ul>
                                <div class="tab-content p-3" id="myTabContent">
                                    <!-- 进货记录 -->
                                    <div class="tab-pane fade show active" id="purchase" role="tabpanel">
                                        <div th:if="${#lists.isEmpty(purchaseRecords)}" class="text-center py-3">
                                            <p class="text-muted">暂无进货记录</p>
                                        </div>
                                        <div th:if="${!#lists.isEmpty(purchaseRecords)}" class="table-responsive">
                                            <table class="table table-striped table-sm">
                                                <thead>
                                                    <tr>
                                                        <th>日期</th>
                                                        <th>数量</th>
                                                        <th>单价</th>
                                                        <th>总价</th>
                                                        <th>备注</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr th:each="record : ${purchaseRecords}">
                                                        <td th:text="${#temporals.format(record.purchaseDate, 'yyyy-MM-dd HH:mm')}">2023-01-01</td>
                                                        <td th:text="${record.quantity + ' ' + product.unit}">10 个</td>
                                                        <td th:text="${#numbers.formatDecimal(record.unitPrice, 1, 2) + '元'}">10.00元</td>
                                                        <td th:text="${#numbers.formatDecimal(record.totalAmount, 1, 2) + '元'}">100.00元</td>
                                                        <td th:text="${record.remark ?: '-'}">备注</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    
                                    <!-- 销售记录 -->
                                    <div class="tab-pane fade" id="sales" role="tabpanel">
                                        <div th:if="${#lists.isEmpty(saleRecords)}" class="text-center py-3">
                                            <p class="text-muted">暂无销售记录</p>
                                        </div>
                                        <div th:if="${!#lists.isEmpty(saleRecords)}" class="table-responsive">
                                            <table class="table table-striped table-sm">
                                                <thead>
                                                    <tr>
                                                        <th>日期</th>
                                                        <th>数量</th>
                                                        <th>单价</th>
                                                        <th>总价</th>
                                                        <th>利润</th>
                                                        <th>客户</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr th:each="record : ${saleRecords}">
                                                        <td th:text="${#temporals.format(record.saleDate, 'yyyy-MM-dd HH:mm')}">2023-01-01</td>
                                                        <td th:text="${record.quantity + ' ' + product.unit}">5 个</td>
                                                        <td th:text="${#numbers.formatDecimal(record.unitPrice, 1, 2) + '元'}">20.00元</td>
                                                        <td th:text="${#numbers.formatDecimal(record.totalAmount, 1, 2) + '元'}">100.00元</td>
                                                        <td th:text="${#numbers.formatDecimal(record.profit, 1, 2) + '元'}" class="text-success">50.00元</td>
                                                        <td th:text="${record.customer ?: '-'}">客户</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧状态信息 -->
                    <div class="col-md-4">
                        <!-- 商品状态卡片 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">商品状态</h5>
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3">
                                    <span class="me-2">状态:</span>
                                    <span th:if="${product.active}" class="badge bg-success">启用</span>
                                    <span th:unless="${product.active}" class="badge bg-danger">禁用</span>
                                </div>
                                
                                <div class="mb-4">
                                    <h6 class="text-muted mb-2">当前库存</h6>
                                    <div class="d-flex align-items-center">
                                        <h3 class="mb-0 me-2" th:classappend="${product.quantity < 10 ? 'text-danger' : 'text-success'}" th:text="${product.quantity}">0</h3>
                                        <small th:text="${product.unit}">单位</small>
                                    </div>
                                    <div th:if="${product.quantity < 10}" class="alert alert-warning mt-2 py-2 mb-0">
                                        <i class="bi bi-exclamation-triangle-fill"></i> 库存不足，建议及时补货！
                                    </div>
                                </div>
                                
                                <!-- 价格信息 -->
                                <div>
                                    <h6 class="text-muted mb-2">价格信息</h6>
                                    <table class="table table-borderless">
                                        <tr>
                                            <th>进货价:</th>
                                            <td th:text="${#numbers.formatDecimal(product.purchasePrice, 1, 2) + ' 元'}">0.00 元</td>
                                        </tr>
                                        <tr>
                                            <th>销售价:</th>
                                            <td th:text="${#numbers.formatDecimal(product.sellingPrice, 1, 2) + ' 元'}">0.00 元</td>
                                        </tr>
                                        <tr>
                                            <th>利润率:</th>
                                            <td th:with="profitRate=${product.purchasePrice == 0 ? 0 : (product.sellingPrice - product.purchasePrice) / product.purchasePrice * 100}"
                                                th:text="${#numbers.formatDecimal(profitRate, 1, 2) + '%'}">0.00%</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 快捷操作 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">快捷操作</h5>
                            </div>
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <a th:href="@{'/purchases/add?productId=' + ${product.id}}" class="btn btn-success">
                                        <i class="bi bi-cart-plus"></i> 商品进货
                                    </a>
                                    <a th:href="@{'/sales/add?productId=' + ${product.id}}" class="btn btn-warning">
                                        <i class="bi bi-cart-check"></i> 商品销售
                                    </a>
                                    <a th:href="@{'/products/edit/' + ${product.id}}" class="btn btn-primary">
                                        <i class="bi bi-pencil"></i> 编辑商品
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 删除确认模态框 -->
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        您确定要删除商品 "<span id="productName"></span>" 吗？此操作无法撤销。
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <a href="#" id="confirmDeleteBtn" class="btn btn-danger">确认删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div layout:fragment="page_scripts">
        <script>
            function confirmDelete(id, name) {
                document.getElementById('productName').textContent = name;
                document.getElementById('confirmDeleteBtn').href = '/inventory/products/delete/' + id;
                var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                deleteModal.show();
            }
        </script>
    </div>
</body>
</html> 